<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8"/>
	<title>Dashboard I Admin Panel</title>
	
	<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
	<script src="js/hideshow.js" type="text/javascript"></script>
	<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() 
    	{ 
      	  $(".tablesorter").tablesorter(); 
   	 } 
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
	
// ------------   Menu Content Hide - Show ---------------------------- 	
	$("#main2").hide();
	$("#main3").hide();
	$("#dashboard").click(function(){
		$("#main").show();
		$("#main2").hide();
		$("#main3").hide();
	});
	
	$("#view_info").click(function(){
		$("#main").hide();
		$("#main2").show();
		$("#main3").hide();
	});
	
	$("#report").click(function(){
		$("#main").hide();
		$("#main2").hide();
		$("#main3").show();
	});
	
});
// ------------   Menu Content Hide - Show ----------------------------
    </script>
<script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
	
	
	

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>


<body>

	<header id="header">
		<hgroup>
			<h1 class="site_title"> <img src="images/syslogo.png" width="380" height="100" longdesc="images/syslogo.png"></h1>
			<h2 class="section_title"></h2>
			<div class="btn_view_site"><a href="#">Logout</a></div>
		</hgroup>
	</header> <!-- end of header bar -->
	
<section id="secondary_bar">
		<div class="user">
			<p>Admin  (<a href="#">551 Alerts</a>)</p>
			<a class="logout_user" href="#" title="Logout">Logout</a>
		</div>
        
        <div align="center"><!-- end of stats article --><!-- end of content manager article --><!-- end of messages article --><!-- end of post new article --><!-- end of styles article --> 
    <div align="center">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><strong><a href="#" id="dashboard">DASHBOARD</a> </strong></li>
        <li><strong><a href="#" id="view_info">VIEW INFO</a></strong></li>
        <li><strong><a href="#" id="report">REPORT</a>
          </strong>        </li>
        <li><strong><a href="#" class="MenuBarItemSubmenu">ALERT</a>
          </strong>
          <ul>
            <li><strong><a href="#">VIEW</a></strong></li>
            <li><strong><a href="#">MANAGE</a></strong></li>
          </ul>
        </li>
        <li><strong><a href="#" class="MenuBarItemSubmenu">NOTIFICATION</a>
          </strong>
          <ul>
            <li><strong><a href="#">VIEW</a></strong></li>
            <li><strong><a href="#">MANAGE</a></strong>        </li>
          </ul>
        </li>
      </ul>
    </div>
</div>
		
  <p>&nbsp;</p>
  <p>&nbsp;</p>
	</section> <!--end of secondary bar -->
	
<aside id="sidebar">
		
		<hr/>
<h3>Group</h3>
		
		<select name="Select" class="sel"><option>Abcd</option>
        <option>Abcd</option>
        <option>Abcd</option>
        <option>Abcd</option>
        </select>
		<hr/>
	  <h3>Users</h3>
		<ul class="toggle">
			<li class="icn_online"><a href="#">0ooooo</a></li>
			<li class="icn_profile"><a href="#">Iiiiii</a></li>
			<li class="icn_profile"><a href="#">Aaaa</a></li>
            <li class="icn_online"><a href="#">Sss</a></li>
            <li class="icn_profile"><a href="#">Wwwwwww</a></li>
		</ul>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
  <p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>
    <footer></footer>
  </p>
  <footer>
    <hr />
  <p><strong>Copyright &copy; 2012 INFOSENSE Services</strong> </p>
</footer>
  </aside>

 <div class="breadcrumbs_container">
		  <article class="breadcrumbs"><a href="index.html"> Admin Home</a> 
          <div class="breadcrumb_divider"></div> <a class="current">Dashboard</a></article>
		  <p>&nbsp;</p>
		</div>
<section id="main" class="column">   
   &nbsp;
 <div id="Accordion2" class="Accordion" tabindex="0">
 	 <div class="AccordionPanel">
    <div class="AccordionPanelTab">SYSTEM INFO</div>
    <div class="AccordionPanelContent">
      <p>&nbsp;</p>
      <p>GRID</p>
    </div>
  </div>
   	<div class="AccordionPanel">
    <div class="AccordionPanelTab">ALERTS (1400)</div>
    <div class="AccordionPanelContent">
       <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab2">HARDWARE (100)</div>
          <div class="AccordionPanelContent2"></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab2">SOFTWARE (100)</div>
          <div class="AccordionPanelContent2"></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab2">PROCESS (1200)</div>
          <div class="AccordionPanelContent2"></div>
        </div>
      </div>
    </div>
  </div>
  	 <div class="AccordionPanel">
    <div class="AccordionPanelTab">REPORTS</div>
    <div class="AccordionPanelContent">
      <p>&nbsp;</p>
      <p>LAST GENERATED CHARTS, PDFS AND ADMIN TASKS</p>
    </div>
  </div>
  
  </div>
   <p>&nbsp;</p>
</section>

<section id="main2" class="column"> 
<table><tr><td>Abc</td><td>Abc</td><td>Abc</td></tr>
		<tr><td>Abc</td><td>Abc</td><td>Abc</td></tr>
        <tr><td>Abc</td><td>Abc</td><td>Abc</td></tr></table>
</section>

<section id="main3" class="column"> 
<table><tr><td>AbcAbcAbcAbcAbcAbcAbc</td><td>AbcAbcAbcAbcAbcAbcAbcAbc</td><td>AbcAbcAbcAbcAbcAbcAbcAbc</td></tr>
		<tr><td>AbcAbcAbcAbcAbcAbcAbcAbc</td><td>AbcAbcAbcAbcAbcAbcAbcAbc</td><td>AbcAbcAbcAbcAbcAbcAbcAbc</td></tr>
        <tr><td>AbcAbcAbcAbcAbcAbcAbcAbc</td><td>AbcAbcAbcAbcAbcAbcAbcAbc</td><td>AbcAbcAbcAbcAbcAbcAbcAbc</td></tr></table>
</section>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var Accordion2 = new Spry.Widget.Accordion("Accordion2");
//var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
</script>
</body>

</html>